<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="keywords" content=" tree demo page" />
    <title>Tree Starter Page | SAP Fundamentals</title>
    <link
      href="https://unpkg.com/@sap-theming/theming-base-content@11.1.35/content/Base/baseLib/sap_fiori_3/css_variables.css"
      rel="stylesheet"
    />
    <link
      href="/vendor/fundamental-styles/dist/fundamental-styles.css"
      rel="stylesheet"
    />
    <link href="../../../styles/styles.css" rel="stylesheet" />
    <script src="/vendor/luigi-client/luigi-client.js"></script>
    <style>
      @media (max-width: 600px) {
        .fd-tree--header .fd-tree__col:nth-child(2) {
          display: none;
        }

        .fd-tree__item .fd-tree__col:nth-child(2) {
          display: none;
        }
      }

      .fd-tree__expander[aria-pressed='true'] .sap-icon--navigation-right-arrow {
        transform: rotate(90deg);
      }
    </style>
  </head>

  <body>
    <div>
      <div class="fd-page">
        <header class="fd-page__header">
          <div class="fd-action-bar">
            <div class="fd-action-bar__header">
              <h3 class="fd-action-bar__title">
                Tree
              </h3>
              <div class="fd-action-bar__actions">
                <button class="fd-button fd-button--compact">
                  <span class="fd-button__text">Add New Item</span>
                  <i class="sap-icon--add"></i>
                </button>
              </div>
            </div>
            <p class="fd-action-bar__description">
              Optional page intro lorem ipsum dolor
            </p>
          </div>
        </header>

        <div class="fd-page__content">
          <section class="fd-section">
            <div class="fd-layout-panel">
              <div class="fd-layout-panel__header">
                <h3 class="fd-layout-panel__title">
                  Categories
                </h3>
              </div>
              <div class="fd-layout-panel__body fd-layout-panel__body--bleed">
                <ul
                  role="tree"
                  aria-label="Root Tree"
                  class="fd-tree fd-tree--no-border expanded-level-3"
                >
                  <li
                    role="treeitem"
                    aria-level="1"
                    aria-expanded="false"
                    class="fd-tree__item"
                    id="TREE1L2"
                  >
                    <div class="fd-tree__item-container">
                      <button
                        tabindex="0"
                        class="fd-tree__expander"
                        aria-controls="TREE1L2"
                        aria-label="Expand all"
                        aria-pressed="false"
                      >
                        <i
                          class="fd-tree__icon sap-icon--navigation-right-arrow"
                          role="presentation"
                        ></i>
                      </button>
                      <div class="fd-tree__content">
                        <span class="fd-tree__text">Level 1</span>
                        <div class="fd-tree__col fd-tree__col--actions">
                          <button
                            class="fd-button fd-button--transparent"
                            aria-label="More"
                          >
                            <i class="sap-icon--overflow"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class="fd-tree" aria-hidden="true">
                      <li
                        role="treeitem"
                        aria-level="2"
                        class="fd-tree__item"
                        aria-expanded="false"
                        id="TREE2L1"
                      >
                        <div class="fd-tree__item-container">
                          <button
                            tabindex="0"
                            class="fd-tree__expander"
                            aria-controls="TREE2L1"
                            aria-label="Expander"
                            aria-pressed="false"
                          >
                            <i
                              class="fd-tree__icon sap-icon--navigation-right-arrow"
                              role="presentation"
                            ></i>
                          </button>
                          <div class="fd-tree__content">
                            <span class="fd-tree__text">Level 2</span>
                            <button
                              class="fd-button fd-button--transparent"
                              aria-label="More"
                            >
                              <i class="sap-icon--overflow"></i>
                            </button>
                          </div>
                        </div>
                        <ul role="group" class="fd-tree" aria-hidden="true">
                          <li
                            role="treeitem"
                            aria-level="3"
                            aria-expanded="false"
                            class="fd-tree__item"
                            id="TREE3L1"
                          >
                            <div class="fd-tree__item-container">
                              <button
                                tabindex="0"
                                class="fd-tree__expander"
                                aria-controls="TREE3L1"
                                aria-label="Expander"
                                aria-pressed="false"
                              >
                                <i
                                  class="fd-tree__icon sap-icon--navigation-right-arrow"
                                  role="presentation"
                                ></i>
                              </button>
                              <div class="fd-tree__content">
                                <span class="fd-tree__text">Level 3</span>
                                <button
                                  class="fd-button fd-button--transparent"
                                  aria-label="More"
                                >
                                  <i class="sap-icon--overflow"></i>
                                </button>
                              </div>
                            </div>
                            <ul role="group" class="fd-tree" aria-hidden="true">
                              <li
                                role="treeitem"
                                aria-level="4"
                                aria-expanded="false"
                                class="fd-tree__item"
                              >
                                <div class="fd-tree__item-container">
                                  <div class="fd-tree__content">
                                    <span class="fd-tree__text">Level 4</span>
                                    <button
                                      class="fd-button fd-button--transparent"
                                      aria-label="More"
                                    >
                                      <i class="sap-icon--overflow"></i>
                                    </button>
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                      <li
                        role="treeitem"
                        aria-level="2"
                        class="fd-tree__item"
                        aria-expanded="false"
                        id="TREE2L2"
                      >
                        <div class="fd-tree__item-container">
                          <div class="fd-tree__content">
                            <span class="fd-tree__text">Level 2</span>
                            <button
                              class="fd-button fd-button--transparent"
                              aria-label="More"
                            >
                              <i class="sap-icon--overflow"></i>
                            </button>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li
                    role="treeitem"
                    aria-level="1"
                    aria-expanded="false"
                    class="fd-tree__item"
                    id="TREE1L3"
                  >
                    <div class="fd-tree__item-container">
                      <button
                        tabindex="0"
                        class="fd-tree__expander"
                        aria-controls="TREE1L3"
                        aria-label="Expand all"
                        aria-pressed="false"
                      >
                        <i
                          class="fd-tree__icon sap-icon--navigation-right-arrow"
                          role="presentation"
                        ></i>
                      </button>
                      <div class="fd-tree__content">
                        <span class="fd-tree__text">Level 1</span>
                        <div class="fd-tree__col fd-tree__col--actions">
                          <button
                            class="fd-button fd-button--transparent"
                            aria-label="More"
                          >
                            <i class="sap-icon--overflow"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class="fd-tree" aria-hidden="true">
                      <li
                        role="treeitem"
                        aria-level="2"
                        class="fd-tree__item"
                        aria-expanded="false"
                      >
                        <div class="fd-tree__item-container">
                          <div class="fd-tree__content">
                            <span class="fd-tree__text">Level 2</span>
                            <div class="fd-tree__col fd-tree__col--actions">
                              <button
                                class="fd-button fd-button--transparent"
                                aria-label="More"
                              >
                                <i class="sap-icon--overflow"></i>
                              </button>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li
                        role="treeitem"
                        aria-level="2"
                        class="fd-tree__item"
                        aria-expanded="false"
                      >
                        <div class="fd-tree__item-container">
                          <div class="fd-tree__content">
                            <span class="fd-tree__text">Level 2</span>
                            <div class="fd-tree__col fd-tree__col--actions">
                              <button
                                class="fd-button fd-button--transparent"
                                aria-label="More"
                              >
                                <i class="sap-icon--overflow"></i>
                              </button>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <li
                    role="treeitem"
                    aria-level="1"
                    aria-expanded="false"
                    class="fd-tree__item"
                    id="TREE1L4"
                  >
                    <div class="fd-tree__item-container">
                      <button
                        tabindex="0"
                        class="fd-tree__expander"
                        aria-controls="TREE1L4"
                        aria-label="Expander"
                        aria-pressed="false"
                      >
                        <i
                          class="fd-tree__icon sap-icon--navigation-right-arrow"
                          role="presentation"
                        ></i>
                      </button>
                      <div class="fd-tree__content">
                        <span class="fd-tree__text">Level 1</span>
                        <div class="fd-tree__col fd-tree__col--actions">
                          <button
                            class="fd-button fd-button--transparent"
                            aria-label="More"
                          >
                            <i class="sap-icon--overflow"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                    <ul role="group" class="fd-tree" aria-hidden="true">
                      <li
                        role="treeitem"
                        aria-level="2"
                        class="fd-tree__item"
                        aria-expanded="false"
                      >
                        <div class="fd-tree__item-container">
                          <div class="fd-tree__content">
                            <span class="fd-tree__text">Level 2</span>
                            <div class="fd-tree__col fd-tree__col--actions">
                              <button
                                class="fd-button fd-button--transparent"
                                aria-label="More"
                              >
                                <i class="sap-icon--overflow"></i>
                              </button>
                            </div>
                          </div>
                        </div>
                      </li>
                      <li
                        role="treeitem"
                        aria-level="2"
                        class="fd-tree__item"
                        aria-expanded="false"
                        id="TREE2L1"
                      >
                        <div class="fd-tree__item-container">
                          <div class="fd-tree__content">
                            <span class="fd-tree__text">Level 2</span>
                            <button
                              class="fd-button fd-button--transparent"
                              aria-label="More"
                            >
                              <i class="sap-icon--overflow"></i>
                            </button>
                          </div>
                        </div>
                        <ul role="group" class="fd-tree" aria-hidden="true">
                          <li
                            role="treeitem"
                            aria-level="3"
                            aria-expanded="false"
                            class="fd-tree__item"
                          >
                            <div class="fd-tree__item-container">
                              <div class="fd-tree__content">
                                <span class="fd-tree__text">Level 3</span>
                                <button
                                  class="fd-button fd-button--transparent"
                                  aria-label="More"
                                >
                                  <i class="sap-icon--overflow"></i>
                                </button>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </li>
                      <li
                        role="treeitem"
                        aria-level="2"
                        class="fd-tree__item"
                        aria-expanded="false"
                        id="TREE4L2"
                      >
                        <div class="fd-tree__item-container">
                          <button
                            tabindex="0"
                            class="fd-tree__expander"
                            aria-controls="TREE4L2"
                            aria-label="Expander"
                            aria-pressed="false"
                          >
                            <i
                              class="fd-tree__icon sap-icon--navigation-right-arrow"
                              role="presentation"
                            ></i>
                          </button>
                          <div class="fd-tree__content">
                            <span class="fd-tree__text">Level 2</span>
                            <button
                              class="fd-button fd-button--transparent"
                              aria-label="More"
                            >
                              <i class="sap-icon--overflow"></i>
                            </button>
                          </div>
                        </div>
                        <ul role="group" class="fd-tree" aria-hidden="true">
                          <li
                            role="treeitem"
                            aria-level="3"
                            aria-expanded="false"
                            class="fd-tree__item"
                          >
                            <div class="fd-tree__item-container">
                              <div class="fd-tree__content">
                                <span class="fd-tree__text">Level 3</span>
                                <button
                                  class="fd-button fd-button--transparent"
                                  aria-label="More"
                                >
                                  <i class="sap-icon--overflow"></i>
                                </button>
                              </div>
                            </div>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <script type="module">
      import setTheme from '../../../themeHelper.js';
      function updateFn() {
        setTheme();
      }

      LuigiClient.addInitListener(updateFn);
      LuigiClient.addContextUpdateListener(updateFn);
    </script>
    <script type="text/javascript">
      (function() {
        //dropdown
        var els = document.querySelectorAll('[aria-controls]');
        for (var i = 0; i < els.length; i++) {
          var el = els[i];
          el.addEventListener('click', function(e) {
            var targetId = this.getAttribute('aria-controls');
            var target = document.getElementById(targetId);
            //alert
            var isAlert = this.parentElement.getAttribute('role') === 'alert';
            if (isAlert) {
              //remove or hide if we want some animation
              // target.setAttribute("aria-hidden", true);
              target.remove();
              return;
            }
            //dropdown
            var isDropdown = this.getAttribute('aria-haspopup') === 'true';
            if (isDropdown) {
              //trigger
              var isExpanded = this.getAttribute('aria-expanded') === 'true';
              this.setAttribute('aria-expanded', !isExpanded);
              //target
              var targetIsHidden = target.getAttribute('aria-hidden') == 'true';
              target.setAttribute('aria-hidden', isExpanded);
              return;
            }
            //tree
            var isTree = target.getAttribute('role') === 'tree';
            var isTreeItem = target.getAttribute('role') === 'treeitem';
            function setPressed(el, bool) {
              el.setAttribute('aria-pressed', bool);
              if (bool) {
                el.classList.add('is-pressed');
                console.log('s-pressed', el);
              } else {
                el.classList.remove('is-pressed');
                console.log('is NOT pressed', el);
              }
            }

            function setExpanded(el, bool) {
              el.setAttribute('aria-expanded', bool);
              //get group
              var group = el.querySelector('[role=group]');
              console.log('aria-pressed=false', el);
              group.setAttribute('aria-hidden', !bool);
              if (!bool) {
                group.classList.add('is-expanded');
              } else {
                group.classList.remove('is-expanded');
              }
            }
            var isPressed;
            //handle the primary trigger
            if (isTree || isTreeItem) {
              isPressed = this.getAttribute('aria-pressed') === 'true';
              setPressed(this, !isPressed);
            }
            //toggle a single treeitem
            if (isTreeItem) {
              setExpanded(target, !isPressed);
            }
            //toggle all treeitems
            if (isTree) {
              //all triggers
              var controls = target.querySelectorAll('[aria-controls]');
              for (var i = 0; i < controls.length; i++) {
                var control = controls[i];
                setPressed(control, !isPressed);
                targetId = control.getAttribute('aria-controls');
                target = document.getElementById(targetId);
                setExpanded(target, !isPressed);
              }
            }
          });
        }
      })();
    </script>
  </body>
</html>
